<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{register.title}"></title>
    <script th:inline="javascript">
        $(function() {
            $("#register-submit-id").click(function() {
                var flag = $(".form-control").checkDom()
                if(!flag) {
                    return
                }
                
                // 邮箱验证逻辑
                var email = $("input[name='email']").val();
                if(!validateEmail(email)) {
                    alert(/*[[#{register.email.invalid}]]*/ "Invalid email");
                    return;
                }
                
                $("#register-form-id").submit()
            })
            
            function validateEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(email);
            }
        })
    </script>
    <style>
        /* 复用登录页样式 */
        body{
            display: flex;
            flex-direction: column;
        }
        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }
        body > header > img{
            height: 80px
        }
        body > header > nav{
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }
        body > article{
            flex-grow: 1;
            background-color: #d4efec;
            width: 100%;
            display: flex;
            align-items: center;
        }
        body > article > section{
            flex-grow: 1;
            display: flex;
        }
        body > article > form{
            flex-basis: 300px;
            margin-right: 30px;
        }
        #register-submit-id {
            width: 100%;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">
    <nav>
        <a th:href="@{/register(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/register(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>
</header>
<article>
    <section>
        <img th:src="@{/assets/images/pic.png}">
    </section>

    <form id="register-form-id" method="post" action="/register">
        <div class="form-group">
            <span th:text="#{register.email}"></span>
            <input class="form-control" name="email" type="email"
                   th:placeholder="#{register.email.plch}"
                   th:title="#{register.email.plch}"
                   required>
        </div>
        
        <div class="form-group">
            <span th:text="#{register.password}"></span>
            <input class="form-control" name="password" type="password"
                   th:placeholder="#{register.password.plch}"
                   th:title="#{register.password.plch}"
                   pattern="^.{6,}$"
                   required>
        </div>
        
        <div class="form-group">
            <span th:text="#{register.confirm.password}"></span>
            <input class="form-control" name="confirmPassword" type="password"
                   th:placeholder="#{register.confirm.password.plch}"
                   th:title="#{register.confirm.password.plch}"
                   pattern="^.{6,}$"
                   required>
        </div>
        
        <a id="register-submit-id" class="btn btn-success btn-group-lg" href="#" 
           th:text="#{register.submit}"></a>
    </form>
</article>
</body>
</html>
